﻿@inherits Blazorise.Carousel
<CascadingValue Value="@this" IsFixed>
    <CascadingValue Value="@State">
        @ChildContent

        <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
            <div class="@SlidesClassNames">
                @for ( int i = 0; i < carouselSlides.Count; ++i )
                {
                    int index = i;
                    <div class="@carouselSlides[index].ClassNames" style="@carouselSlides[index].StyleNames" @attributes="@carouselSlides[index].Attributes">
                        @carouselSlides[index].ChildContent
                    </div>
                }

                @if ( ShowControls )
                {
                    <div class="carousel-arrow is-hovered">
                        <span class="icon has-icons-left" @onclick="@SelectPrevious">
                            <Icon Name="IconName.ChevronLeft" />
                        </span>
                        <span class="icon has-icons-right" @onclick="@SelectNext">
                            <Icon Name="IconName.ChevronRight" />
                        </span>
                    </div>
                }
            </div>

            @if ( ShowIndicators )
            {
                <div class="@IndicatorsClassNames">
                    @for ( int i = 0; i < carouselSlides.Count; ++i )
                    {
                        int index = i;
                        <a @onclick="@carouselSlides[index].Activate" class="@carouselSlides[index].IndicatorClassNames" style="@carouselSlides[index].IndicatorStyleNames">
                            <span class="indicator-style is-dots"></span>
                        </a>
                    }
                </div>
            }
        </div>
    </CascadingValue>
</CascadingValue>